<script setup>
import { ref, onMounted } from 'vue'
import {
  BaiduMap,
  BmNavigation,
  BmScale,
  BmOverviewMap,
  BmMarker
} from 'vue-baidu-map-3x'
import toTop from '@/components/ToTop.vue'
import { useRoute, useRouter } from 'vue-router'
import { Chicken, Select, CloseBold, Top } from '@element-plus/icons-vue'
import {
  getPostCommentServer,
  addPostCommentServer,
  postFeedServer,
  updateAdminPostListServer,
  deletePostCommentServer
} from '@/api/postList'
import { useUserStore } from '@/stores'

const userStore = useUserStore()
const route = useRoute()
const router = useRouter()

const postListItem = ref()
const lnglat = ref({ lng: 113.3927623, lat: 23.0490922 })
onMounted(async () => {
  postListItem.value = await JSON.parse(route.query.item)
  console.log(postListItem.value)

  lnglat.value.lng = parseFloat(postListItem.value.location.split(',')[0])
  lnglat.value.lat = parseFloat(postListItem.value.location.split(',')[1])

  getPostComment(postListItem.value.postId)
})

/**
 * 获取评论列表
 */
const getPostComment = async (postId) => {
  const res = await getPostCommentServer(postId)

  postCommentList.value = res.data.data.records

  postCommentList.value = postCommentList.value.map((item) => ({
    ...item,
    flag: false,
    input: '',
    inputVisible: false
  }))
  console.log(postCommentList.value)
}

const input = ref('')

const pageContainerBox = ref()
const toTopClick = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}
const addPostList = async () => {
  ElMessageBox.confirm('确定审核通过该帖子？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await updateAdminPostListServer(postListItem.value.postId, 2)
    ElMessage.success('审核成功')
    router.push('/postList/message')
  })
}
const deletePostList = async () => {
  ElMessageBox.confirm('确定删除该帖子？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await updateAdminPostListServer(postListItem.value.postId, 3)
    ElMessage.success('删除成功')
    router.push('/postList/message')
  })
}

const postFeed = async () => {
  const res = await postFeedServer(postListItem.value.postId)
  ElMessage.success(res.data.msg)
}

const inputRef = ref(null)
const showInput = (item) => {
  item.inputVisible = true
}
const handleInputConfirm = async (id, value) => {
  await addPostCommentServer(postListItem.value.postId, value, id)

  await getPostComment(postListItem.value.postId)
}

const postCommentList = ref([])

const commenSend = async () => {
  const res = await addPostCommentServer(postListItem.value.postId, input.value)

  ElMessage.success(res.data.msg)
  await getPostComment(postListItem.value.postId)
}

const deleteComment = async (commentId) => {
  ElMessageBox.confirm('确定删除该评论？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await deletePostCommentServer(commentId)
    ElMessage.success('删除成功')

    await getPostComment(postListItem.value.postId)
  })
}
</script>

<template>
  <page-container
    :title="postListItem?.title"
    place="center"
    ref="pageContainerBox"
  >
    <template #extra> </template>

    <section class="detailBox">
      <div class="detail clearfix">
        <img :src="postListItem?.imageUrls[0]" alt="" class="cardImg" />
        {{ postListItem?.content }}
      </div>

      <div class="map">
        <baidu-map
          class="map"
          ak="ODp6X9Pb9W0kffbhOylM1gFP9BuXRLok"
          v="3.0"
          type="API"
          :center="lnglat"
          :zoom="18"
          :scroll-wheel-zoom="true"
        >
          <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
          <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
          <bm-overview-map
            anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
            :isOpen="true"
          ></bm-overview-map>
          <bm-marker :position="lnglat"></bm-marker>
        </baidu-map>
      </div>
    </section>
    <section>
      <el-divider />
      <div class="comment">
        <el-input v-model="input" placeholder="请输入评论" type="textarea" />

        <el-button type="primary" @click="commenSend">发送评论</el-button>
      </div>
      <el-divider />
      <ul class="commentList">
        <li v-for="item in postCommentList" :key="item.commentId">
          <div>
            <span>{{ item.name }}</span>
            <span>
              {{ item.content }}
              <em class="deleteEm" @click="deleteComment(item.commentId)">×</em>
            </span>
          </div>
          <em v-if="!item.flag">
            <em
              class="button-tag"
              @click.self="
                () => {
                  item.flag = true
                }
              "
              >展开</em
            >

            <el-input
              v-if="item.inputVisible"
              ref="inputRef"
              v-model="item.input"
              class="w-20"
              size="small"
              style="width: 96px; height: 24px"
              @keyup.enter="handleInputConfirm(item.commentId, item.input)"
            />
            <em
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput(item)"
            >
              评论
            </em>
          </em>

          <ol v-else>
            <li v-for="item1 in item.children" :key="item1.commentId">
              <span>{{ item1.name }}</span>
              <span
                >{{ item1.content }}
                <em class="deleteEm" @click="deleteComment(item1.commentId)"
                  >×</em
                ></span
              >
            </li>
          </ol>
          <em
            v-if="item.flag"
            @click="
              () => {
                item.flag = false
              }
            "
            style="margin-left: 120px"
          >
            收起
          </em>
        </li>
      </ul>
    </section>
  </page-container>

  <toTop @success="toTopClick" :num="0" :tooltip="'回到顶部'">
    <template #icon>
      <el-icon><Top /></el-icon>
    </template>
  </toTop>

  <toTop @success="postFeed" :num="1" color="orange" :tooltip="'喂养'">
    <template #icon>
      <el-icon><Chicken /></el-icon>
    </template>
  </toTop>

  <toTop
    @success="addPostList"
    :num="2"
    color="green"
    v-if="userStore.user.type == 1"
    :tooltip="'审核通过'"
  >
    <template #icon>
      <el-icon><Select /></el-icon>
    </template>
  </toTop>

  <toTop
    @success="deletePostList"
    :num="3"
    color="red"
    v-if="userStore.user.type == 1"
    :tooltip="'审核不通过'"
  >
    <template #icon>
      <el-icon><CloseBold /></el-icon>
    </template>
  </toTop>
</template>

<style scoped>
.deleteEm {
  cursor: pointer;
  opacity: 0;
  transition: all 0.5s;
  &:hover {
    opacity: 1;
    color: red;
  }
}
.adoptMsg {
  margin-right: 20px;
}
.commentList {
  > li {
    margin-bottom: 10px;
    > div,
    > ol > li {
      display: flex;
      /* align-items: center; */
      span {
        margin-top: 10px;
        line-height: 20px;
        &:last-of-type {
          margin-left: 15px;
          flex: 1;
        }
        &:first-of-type {
          color: #409eff;
        }
      }
    }
    > ol > li {
      margin-top: 5px;
      span:first-of-type {
        margin-left: 60px;
      }
    }
    > em {
      color: skyblue;
      margin-left: 60px;
      margin-top: 10px;
      text-decoration: underline;
    }
  }
}
.comment {
  display: flex;
  .el-textarea {
    margin-right: 20px;
  }
}
section {
  width: 50vw;
  margin: auto;
  .detail {
    width: 50vw;
    margin: auto;
    img {
      margin-right: 20px;
      margin-bottom: 10px;
    }
    * {
      float: left;
    }
  }
  .map {
    width: calc(50vw - 40px);
    margin: 20px auto;
    aspect-ratio: 16/9;
  }
}
.cardImg {
  aspect-ratio: 16/9;
  width: 50%;
  border-radius: 5px;
}
.button-tag {
  margin-right: 20px;
}
</style>
